<h1 mat-dialog-title>Configurator for node {{ name }}</h1>

<div class="modal-form-container">
  <div class="content">
    <div class="default-content">
      <mat-card class="matCard">
        <mat-tab-group *ngIf="name">
          <mat-tab label="General settings">
            <br />
            <form [formGroup]="generalSettingsForm">
              <mat-form-field class="form-field">
                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name" />
              </mat-form-field>
              <mat-form-field class="form-field">
                <input
                  matInput
                  type="number"
                  formControlName="ram"
                  [(ngModel)]="node.properties.ram"
                  placeholder="RAM"
                />
                <span matSuffix>MB</span>
              </mat-form-field>
            </form>
            <mat-form-field class="form-field">
              <input matInput type="number" [(ngModel)]="node.properties.cpus" placeholder="vCPUs" />
            </mat-form-field>
            <mat-form-field class="form-field">
              <mat-select placeholder="Qemu binary" [(ngModel)]="node.properties.qemu_path">
                <mat-option *ngFor="let binary of binaries" [value]="binary.path">
                  {{ binary.path }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
              <mat-select placeholder="Boot priority" [(ngModel)]="node.properties.boot_priority">
                <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
                  {{ priority[0] }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
              <mat-select placeholder="On close" [(ngModel)]="node.properties.on_close">
                <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
                  {{ option[0] }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="select">
              <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
                <mat-option *ngFor="let type of consoleTypes" [value]="type">
                  {{ type }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-checkbox [(ngModel)]="node.properties.console_auto_start"> Auto start console </mat-checkbox>
          </mat-tab>
          <mat-tab label="HDD">
            <mat-card>
              <!-- to do -->
              <button mat-raised-button color="primary" (click)="openQemuImageCreator()" class="create-button">
                Create Qemu image
              </button>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> HDA (Primary Master) </mat-card-subtitle>
              <mat-card-content>
                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hda_disk_image">
                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
                    {{ image.filename }}
                  </mat-option>
                </mat-select>
                <mat-form-field class="form-field">
                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hda_disk_interface">
                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                      {{ interface }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-card-content>
            </mat-card>
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> HDB (Primary Slave) </mat-card-subtitle>
              <mat-card-content>
                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdb_disk_image">
                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
                    {{ image.filename }}
                  </mat-option>
                </mat-select>
                <mat-form-field class="form-field">
                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdb_disk_interface">
                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                      {{ interface }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-card-content>
            </mat-card>
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> HDC (Secondary Master) </mat-card-subtitle>
              <mat-card-content>
                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdc_disk_image">
                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
                    {{ image.filename }}
                  </mat-option>
                </mat-select>
                <mat-form-field class="form-field">
                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdc_disk_interface">
                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                      {{ interface }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-card-content>
            </mat-card>
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> HDD (Secondary Slave) </mat-card-subtitle>
              <mat-card-content>
                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdd_disk_image">
                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
                    {{ image.filename }}
                  </mat-option>
                </mat-select>
                <mat-form-field class="form-field">
                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdd_disk_interface">
                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                      {{ interface }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-card-content>
            </mat-card>
          </mat-tab>
          <mat-tab label="CD/DVD">
            <div>
              <button mat-raised-button color="primary" (click)="filecdrom.click()" class="file-button">Browse</button>
              <input type="file" #filecdrom class="nonvisible" (change)="uploadCdromImageFile($event)" />
              <mat-form-field class="file-name-form-field">
                <input matInput type="text" [(ngModel)]="node.properties.cdrom_image" placeholder="Image" />
              </mat-form-field>
            </div>
          </mat-tab>
          <mat-tab label="Network">
            <br /><mat-checkbox [(ngModel)]="node.properties.legacy_networking">
              Use the legacy networking mode
            </mat-checkbox>
            <br /><mat-checkbox [(ngModel)]="node.properties.replicate_network_connection_state">
              Replicate network connection state
            </mat-checkbox>
            <app-custom-adapters-table
              #customAdapters
              [networkTypes]="networkTypes"
              [displayedColumns]="displayedColumns"
              [adapters]="node.ports"
            ></app-custom-adapters-table>
          </mat-tab>
          <mat-tab label="Advanced">
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> Linux boot specific settings </mat-card-subtitle>
              <mat-card-content>
                <div>
                  <button mat-raised-button color="primary" (click)="fileinitrd.click()" class="file-button">
                    Browse
                  </button>
                  <input type="file" #fileinitrd class="nonvisible" (change)="uploadInitrdFile($event)" />
                  <mat-form-field class="file-name-form-field">
                    <input
                      matInput
                      type="text"
                      [(ngModel)]="node.properties.initrd"
                      placeholder="Initial RAM disk (initrd)"
                    />
                  </mat-form-field>
                </div>
                <div>
                  <button mat-raised-button color="primary" (click)="filekerenelimage.click()" class="file-button">
                    Browse
                  </button>
                  <input type="file" #filekernelimage class="nonvisible" (change)="uploadKernelImageFile($event)" />
                  <mat-form-field class="file-name-form-field">
                    <input matInput type="text" [(ngModel)]="node.properties.kernel_image" placeholder="Kernel image" />
                  </mat-form-field>
                </div>
                <mat-form-field class="form-field">
                  <input
                    matInput
                    type="text"
                    [(ngModel)]="node.properties.kernel_command_line"
                    placeholder="Kernel command line"
                  />
                </mat-form-field>
              </mat-card-content>
            </mat-card>
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> Bios </mat-card-subtitle>
              <mat-card-content>
                <div>
                  <button mat-raised-button color="primary" (click)="filebios.click()" class="file-button">
                    Browse
                  </button>
                  <input type="file" #filebios class="nonvisible" (change)="uploadBiosFile($event)" />
                  <mat-form-field class="file-name-form-field">
                    <input matInput type="text" [(ngModel)]="node.properties.bios_image" placeholder="Bios image" />
                  </mat-form-field>
                </div>
              </mat-card-content>
            </mat-card>
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> Optimization </mat-card-subtitle>
              <mat-card-content>
                <mat-checkbox [(ngModel)]="activateCpuThrottling"> Activate CPU throttling </mat-checkbox>
                <mat-form-field *ngIf="activateCpuThrottling" class="form-field">
                  <input
                    matInput
                    type="number"
                    [(ngModel)]="node.properties.cpu_throttling"
                    placeholder="Perecentage of CPU allowed"
                  />
                </mat-form-field>
                <mat-form-field class="form-field">
                  <mat-select placeholder="Process priority" [(ngModel)]="node.properties.process_priority">
                    <mat-option *ngFor="let priority of priorities" [value]="priority">
                      {{ priority }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-card-content>
            </mat-card>
            <mat-card>
              <mat-card-title></mat-card-title>
              <mat-card-subtitle> Additional settings </mat-card-subtitle>
              <mat-card-content>
                <mat-form-field class="form-field">
                  <input matInput type="text" [(ngModel)]="node.properties.options" placeholder="Options" />
                </mat-form-field>
                <br /><mat-checkbox [(ngModel)]="node.properties.tpm">
                   Enable the Trusted Platform Module (TPM)
                 </mat-checkbox>
                <br /><mat-checkbox [(ngModel)]="node.properties.uefi">
                   Enable the UEFI boot mode
                 </mat-checkbox>
              </mat-card-content>
            </mat-card>
          </mat-tab>
          <mat-tab label="Usage">
            <mat-form-field class="form-field">
              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
            </mat-form-field>
          </mat-tab>
        </mat-tab-group>
      </mat-card>
    </div>
  </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
